<template>
  <div class="box">
    <div class="left">
      <div class="tab">
        <div
          v-for="(v, i) in tabLabel"
          :key="i"
          :class="tabIndex == i ? 'tabActive tabItem' : 'tabItem'"
          @click="tabFn(i)"
        >
          {{ v }}
        </div>
      </div>
      <div>
        <el-input
          placeholder="请输入客户名称"
          suffix-icon="el-icon-search"
          v-model="selectValue"
          @change="search()"
        >
        </el-input>
      </div>
      <div
        class="searchList"
        @scroll="handleScroll"
        v-if="searchList.length > 0"
      >
        <div
          v-for="(v, index) in searchList"
          :key="v.id + index"
          class="searchListItem"
          @click="detail(v.id)"
        >
          {{ v.name }}
        </div>
      </div>
      <div class="noData" v-else>暂无数据</div>
    </div>
    <div class="right">
      <!-- 客户信息 -->
      <div class="card">
        <template v-if="tabIndex == 0">
          <div class="title">客户信息</div>
          <div class="info">
            <div class="infoItem">
              <div>
                <span class="infoItemLabel">客户名称</span
                ><span>{{ info.customerNM }}</span>
              </div>
              <div>
                <span class="infoItemLabel">客户编号</span
                ><span>{{ info.customerID }}</span>
              </div>
              <div>
                <span class="infoItemLabel">公司地址</span
                ><span>{{ info.comAddress }}</span>
              </div>
            </div>
            <div class="infoItem">
              <!-- <div>
                <span class="infoItemLabel">信用评级</span
                ><span>{{ info.custRating }}</span>
              </div> -->
              <div>
                <span class="infoItemLabel">累计销售规模</span
                ><span>{{ info.cumlativeAmount | filterNum }}</span>
              </div>
              <div>
                <span class="infoItemLabel">累计销售只数</span
                ><span>{{ info.cumlativeSize }}</span>
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="title">债券信息</div>
          <div class="info">
            <div class="infoItem">
              <div class="fullname">
                <span class="infoItemLabel">债券全称</span
                ><span>{{ info.bondFname }}</span>
              </div>
              <div>
                <span class="infoItemLabel">债券编码</span
                ><span>{{ info.bondId }}</span>
              </div>
              <div>
                <span class="infoItemLabel">债券简称</span
                ><span>{{ info.bondSname }}</span>
              </div>
            </div>
            <div class="infoItem">
              <div>
                <span class="infoItemLabel"></span>
              </div>
              <div>
                <!-- <span class="infoItemLabel">发行规模</span><span>{{ info.issueAmount * 10000 }}万元</span> -->
                <span class="infoItemLabel">发行规模</span
                ><span>{{ (info.issueAmount * 10000) | filterNum }}元</span>
              </div>
              <div>
                <span class="infoItemLabel">债券类型</span
                ><span>{{ info.bondType }}</span>
              </div>
            </div>
            <div class="infoItem">
              <div>
                <span class="infoItemLabel">发行日</span
                ><span>{{ info.issueDate }}</span>
              </div>
              <div>
                <span class="infoItemLabel">起息日</span
                ><span>{{ info.effDate }}</span>
              </div>
              <div>
                <span class="infoItemLabel">兑付日</span
                ><span>{{ info.maturityDate }}</span>
              </div>
            </div>
            <div class="infoItem">
              <div>
                <span class="infoItemLabel">期限（天）</span
                ><span>{{ info.termDays }}</span>
              </div>
              <div>
                <span class="infoItemLabel">发行价（百元面值）</span
                ><span>100</span>
              </div>
              <div>
                <span class="infoItemLabel">发行利率（%）</span
                ><span>{{ info.issueCouponRate }}</span>
              </div>
            </div>
          </div>
        </template>
      </div>
      <!-- 分群图和分群特征统计 -->
      <div class="card group-statistics">
        <div class="title">分群图和分群特征统计</div>
        <div class="content">
          <div class="chart" id="charts"></div>
          <template v-if="tabIndex == 0">
            <el-table :data="groupData" height="250" style="width: 100%">
              <el-table-column
                prop="groupId"
                label="分群号"
                min-width="90"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="groupNM"
                label="群名"
                min-width="90"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="avgCumlativeAmount"
                label="销售规模均值(万元)"
                :formatter="formatterNum"
                min-width="90"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="avgCumlativeSize"
                label="销售只数均值"
                min-width="90"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="avgRiskAttItudeNM"
                label="风险偏好"
                min-width="90"
                align="center"
              >
              </el-table-column>
            </el-table>
          </template>
          <template v-else>
            <el-table :data="groupData" height="250" style="width: 100%">
              <el-table-column
                prop="groupId"
                label="分群号"
                min-width="90"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="groupNM"
                label="群名"
                min-width="90"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="avgIssueCouponRate"
                label="利率均值（%）"
                min-width="90"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="avgIssueAmount"
                label="发行规模均值(万元)"
                :formatter="formatterNum"
                min-width="90"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="avgBondFee"
                label="手续费均值（%）"
                min-width="90"
                align="center"
              >
              </el-table-column>
            </el-table>
          </template>
        </div>
      </div>
      <!-- 分群表 -->
      <div class="card group-detail">
        <div class="title">分群表</div>
        <div class="content">
          <template v-if="tabIndex == 0">
            <el-table :data="tableData" height="320" style="width: 100%">
              <el-table-column label="序号" type="index" width="50">
              </el-table-column>
              <el-table-column
                prop="customerID"
                label="编号"
                min-width="140"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="customerNM"
                label="名称"
                min-width="140"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="groupId"
                label="债券分群号"
                min-width="140"
                align="center"
              >
              </el-table-column>
            </el-table>
          </template>
          <template v-else>
            <el-table :data="tableData" height="320" style="width: 100%">
              <el-table-column label="序号" type="index" width="50">
              </el-table-column>
              <el-table-column
                prop="bondId"
                label="编号"
                min-width="140"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="bondFname"
                label="名称"
                min-width="140"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="groupId"
                label="债券分群号"
                min-width="140"
                align="center"
              >
              </el-table-column>
            </el-table>
          </template>
        </div>
        <el-pagination
          small
          background
          layout="prev, pager, next"
          :page-size="pageInfo.pageSize"
          :current-page="pageInfo.pageNum"
          :total="pageInfo.total"
          @current-change="customerChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import {
  getCustomerCommon,
  getBondCommon,
  getCustomerGroupdefineStatistics,
  getBondGroupdefineStatistics,
  getCustomerfeatures,
  getBondfeatures,
  getCustomertable,
  getBondtable,
} from "@/api/eigen/groupStatistics.js";

export default {
  data() {
    return {
      pageInfo: {
        pageCount: 3,
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      leftId: "",
      tabIndex: 0,
      tabLabel: ["客户列表", "债券列表"],
      groupData: [],
      tableData: [],
      searchInput: "",
      info: {},
      loading: false,
      selectValue: "",
      searchList: [
        // {
        //   id: "1",
        //   name: "侧视1322131",
        // },
        // {
        //   id: "2",
        //   name: "侧视2222222",
        // },
        // {
        //   id: "3",
        //   name: "侧视3333335",
        // },
        // {
        //   id: "4",
        //   name: "侧视4345555",
        // },
        // {
        //   id: "5",
        //   name: "侧视1322131",
        // },
      ],
      chartOption: {
        title: {},
        tooltip: {},
        legend: {
          selected: { x: false },
        },
        dataset: {
          dimensions: ["x", "y"],
          source: [
            { type: "apple", x: 1, y: 1 },
            { type: "apple", x: 1, y: 3 },
            { type: "apple", x: 4, y: 5 },
            { type: "apple", x: 30, y: 25 },
            { type: "apple", x: 30, y: 50 },
            { type: "apple", x: 100, y: 150 },
            { type: "apple", x: 50, y: 230 },
            { type: "apple", x: 340, y: 500 },
            { type: "apple", x: 540, y: 400 },
            { type: "apple", x: 960, y: 800 },
            { type: "apple", x: 2, y: 1 },
            { type: "apple", x: 3, y: 3 },
            { type: "apple", x: 6, y: 4 },
            { type: "apple", x: 27, y: 30 },
            { type: "apple", x: 35, y: 60 },
            { type: "apple", x: 170, y: 150 },
            { type: "apple", x: 345, y: 237 },
            { type: "apple", x: 352, y: 460 },
            { type: "apple", x: 573, y: 756 },
            { type: "apple", x: 810, y: 950 },
          ],
        },
        xAxis: {
          type: "category",
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(219,225,255,1)",
              width: 0,
              type: "solid",
            },
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(219,225,255,1)",
              width: 0,
              type: "solid",
            },
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            type: "scatter",
            symbolSize: 5,
            itemStyle: {
              color(params) {
                if (params.value.type == "apple") {
                  return "#2F99EB";
                } else {
                  return "#6df";
                }
              },
            },
          },
        ],
      },
      pageInfo: {
        pageNum: 1,
        pageSize: 50,
        total: 0,
      },
    };
  },
  filters: {
    filterNum(value) {
      const str = value ? value.toString() : "";
      if (str) {
        const reg =
          str.indexOf(".") > -1 ? /\B(?=(\d{3})+\.)/g : /\B(?=(\d{3})+$)/g;
        const returnData = str.replace(reg, ",");
        return returnData;
      } else {
        return "";
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      let chartDom = document.getElementById("charts");
      let myChart = echarts.init(chartDom);
      myChart.setOption(this.chartOption);
      this.getCustomerCommon();
    });
  },
  methods: {
    formatterNum(row, cloumn, cellValue, index) {
      const str = cellValue;
      if (str) {
        const reg =
          str.indexOf(".") > -1 ? /\B(?=(\d{3})+\.)/g : /\B(?=(\d{3})+$)/g;
        const returnData = str.replace(reg, ",");
        return returnData;
      } else {
        return "";
      }
    },
    customerChange(pageNum) {
      this.pageInfo.pageNum = pageNum;
      if (this.tabIndex == 0) {
        this.getCustomertable(this.leftId);
      } else {
        this.getBondtable(this.leftId);
      }
    },
    tabFn(i) {
      this.tabIndex = i;
      if (this.tabIndex == 0) {
        this.getCustomerCommon();
      } else {
        this.getBondCommon();
      }
    },
    search() {
      if (this.tabIndex == 0) {
        this.getCustomerCommon();
      } else {
        this.getBondCommon();
      }
    },
    detail(id) {
      this.leftId = id;
      if (this.tabIndex == 0) {
        this.getCustomerGroupdefineStatistics(id);
        this.getCustomerfeature(id);
        this.getCustomertable(id);
      } else {
        this.getBondGroupdefineStatistics(id);
        this.getBondfeatures(id);
        this.getBondtable(id);
      }
    },
    handleScroll(e) {
      let _this = this;
      if (
        e.target.scrollTop + e.target.offsetHeight >=
        e.target.scrollHeight - 10
      ) {
        if (
          _this.pageInfo.pageNum * _this.pageInfo.pageSize <
            _this.pageInfo.total &&
          !_this.loading
        ) {
          _this.pageInfo.pageNum++;
          _this.loading = true;
          if (_this.tabIndex == 0) {
            getCustomerCommon({
              customerNM: _this.selectValue,
              pn: _this.pageInfo.pageSize,
              page: _this.pageInfo.pageNum,
            }).then((res) => {
              res.data.result.forEach((item) => {
                _this.searchList.push({
                  id: item.customerID,
                  name: item.customerNM,
                });
              });
              _this.loading = false;
              _this.pageInfo.total = parseInt(res.data.totalResults);
            });
          } else {
            getBondCommon({
              bondName: _this.selectValue,
              pn: _this.pageInfo.pageSize,
              page: _this.pageInfo.pageNum,
            }).then((res) => {
              res.data.result.forEach((item) => {
                _this.searchList.push({
                  id: item.bondId,
                  name: item.bondSname,
                });
              });
              _this.loading = false;
              _this.pageInfo.total = parseInt(res.data.totalResults);
            });
          }
        }
      }
    },
    getCustomerCommon() {
      let _this = this;
      _this.pageInfo.pageNum = 1;
      getCustomerCommon({
        customerNM: _this.selectValue,
        pn: _this.pageInfo.pageSize,
        page: _this.pageInfo.pageNum,
      }).then((res) => {
        _this.searchList = [];
        res.data.result.forEach((item) => {
          _this.searchList.push({
            id: item.customerID,
            name: item.customerNM,
          });
        });
        _this.pageInfo.total = parseInt(res.data.totalResults);
      });
    },
    getBondCommon() {
      let _this = this;
      _this.pageInfo.pageNum = 1;
      getBondCommon({
        bondName: _this.selectValue,
        pn: _this.pageInfo.pageSize,
        page: _this.pageInfo.pageNum,
      }).then((res) => {
        _this.searchList = [];
        res.data.result.forEach((item) => {
          _this.searchList.push({
            id: item.bondId,
            name: item.bondSname,
          });
        });
        _this.pageInfo.total = parseInt(res.data.totalResults);
      });
    },
    getCustomerGroupdefineStatistics(id) {
      let _this = this;
      getCustomerGroupdefineStatistics({
        customerId: id,
      }).then((res) => {
        if (res.data != null) {
          _this.info = res.data.result[0];
        }
      });
    },
    getBondGroupdefineStatistics(id) {
      let _this = this;
      getBondGroupdefineStatistics({
        bondId: id,
      }).then((res) => {
        if (res.data != null) {
          _this.info = res.data.result[0];
        }
      });
    },
    getCustomerfeature(id) {
      let _this = this;
      getCustomerfeatures({
        customerId: id,
      }).then((res) => {
        if (res.data != null) {
          _this.groupData = res.data;
        }
      });
    },
    getBondfeatures(id) {
      let _this = this;
      getBondfeatures({
        bondId: id,
      }).then((res) => {
        if (res.data != null) {
          _this.groupData = res.data;
        }
      });
    },
    getCustomertable(id) {
      let _this = this;
      getCustomertable({
        customerId: id,
        pn: _this.pageInfo.pageSize,
        page: _this.pageInfo.pageNum,
      }).then((res) => {
        if (res.data != null) {
          _this.tableData = [];
          _this.tableData = res.data.result;
          _this.pageInfo.total = parseInt(res.data.totalResults);
        }
      });
    },
    getBondtable(id) {
      let _this = this;
      getBondtable({
        bondId: id,
        pn: _this.pageInfo.pageSize,
        page: _this.pageInfo.pageNum,
      }).then((res) => {
        if (res.data != null) {
          _this.tableData = [];
          _this.tableData = res.data.result;
          _this.pageInfo.total = parseInt(res.data.totalResults);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-pagination {
  text-align: right;
  margin: 10px;
}

.noData {
  margin: 30px 0;
  text-align: center;
  color: #fff;
}

.box {
  display: flex;

  .riskAppetiteTable {
    padding-top: 10px;
    padding-right: 10px;

    .el-input__inner {
      background-color: #363657 !important;
      color: #fff;
      border: 1px solid rgba(126, 163, 255, 0.3);
    }
  }

  // .riskAppetiteSelect ::v-deep .el-range-editor.is-active{
  //   border-color: rgba(126, 163, 255, 0.3) !important;
  // }
  .riskAppetiteTable ::v-deep .el-range-input {
    background-color: #363657 !important;
    color: #fff;
  }

  .riskAppetiteSelect {
    margin: 0 5px;
  }

  .riskAppetiteSelect ::v-deep .el-input__inner {
    height: 31px !important;
    line-height: 31px !important;
  }

  .el-select-dropdown {
    padding: 10px 0px !important;
  }

  .left {
    width: 300px;
    background-color: #262d47;
    height: 100%;
    padding: 10px 10px;
  }

  .right {
    margin-left: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .tab {
    display: flex;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin-bottom: 10px;
    color: #959fc5;

    div {
      flex: 1;
      cursor: pointer;
    }

    .tabActive {
      background-color: #1c2238 !important;
      color: #fff;
    }
  }

  .searchList {
    padding-top: 10px;
    max-height: 800px;
    height: 100%;
    overflow-y: scroll;

    .searchListItem {
      padding-left: 10px;
      padding-right: 10px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background-color: #363657;
      color: #959fc5;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .searchListItem:hover {
      background-color: #1c2238 !important;
      color: #fff;
      cursor: pointer;
    }
  }

  .card {
    padding: 10px 10px;
    background-color: #262d47;
    color: #959fc5;

    .title {
      font-size: 16px;
    }

    .content {
      margin-top: 10px;
      display: flex;
    }

    .info {
      display: flex;
      padding: 10px 10px;

      .infoItem {
        flex: 1;

        div:not(:last-child) {
          margin-bottom: 10px;
        }
      }

      .infoItem .fullname {
        width: 195%;
      }
    }
  }

  .group-statistics {
    margin-top: 10px;

    .content {
      .chart {
        width: 300px;
        height: 300px;
        margin-right: 10px;
      }
    }
  }

  .group-detail {
    height: 100%;
    margin-top: 10px;
  }

  .btn-group {
    padding: 10px 5px;
  }

  .infoItemLabel {
    margin-right: 10px;
  }

  .el-table ::v-deep th.el-table__cell {
    background-color: #1c2238 !important;
    color: #fff;
  }
}
</style>
